<template>
<div class="shopinfo">
    <!-- 商品轮播图区域 -->
    <div class="mui-card">
		<div class="mui-card-content">
            <div class="mui-card-content-inner">
                <mt-swipe :auto="3000">
                    <mt-swipe-item v-for="item in lunbolist" :key="item.id">
                        <img :src="item.img" alt="">
                    </mt-swipe-item>
                </mt-swipe>
            </div>
		</div>
	</div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
        <div class="mui-card-header">商品名称</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p class="price">
                    <span class="marketprice">市场价：￥{{ shopinfo.old_price }}</span>
                    <span class="sellprice">销售价：￥{{ shopinfo.sell_price }}</span>
                </p>
                <p>
                    购买数量:<numbox @func="getSelectcount" :max="shopinfo.shop_ku"></numbox>
				</p>
                <div class="btn">
                    <mt-button type="primary" size="normal">立即购买</mt-button>
                    <mt-button type="danger" @click="addshop" id="mybtn" v-show="flag">加入购物车</mt-button>
                </div>
            </div>              
        </div>
    </div>
<!-- 参数区域 -->
    <div class="mui-card">
        <div class="mui-card-header">商品参数</div>
        <div class="mui-card-content">
            <div class="mui-card-content-inner">
                <p>商品货号：{{ shopinfo.shop_io }}</p>
                <p>库存情况：{{ shopinfo.shop_ku }}</p>
                <p>上架时间：{{ shopinfo.shop_time | dataFormat }}</p>
            </div>
        </div>
        <div class="mui-card-footer">
            <mt-button type="primary" size="large" @click="gocomment(id)">商品评论</mt-button>
            <mt-button type="primary" size="large" @click="goinstraction(id)">图文介绍</mt-button>
        </div>
    </div>
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
    <div class="ball" v-show="ballflag" ref="myball"></div>
    </transition>
    
</div> 
</template>

<script>
import numbox from '../../subcomponent/shopinfo-numbox.vue';
import { Toast } from 'mint-ui'
export default {
    data(){
        return {
            id:this.$route.params.id,
            lunbolist:[],
            shopinfo:{shop_io:201821095548,shop_ku:51,shop_time:new Date(),sell_price:2199,old_price:2399},
            ballflag:false,
            flag:true,
            count:1,
            shoplist:{}
        }
    },
    created(){
        this.getLunbolist()
    },
    // mounted(){
    //     this.getSelectcount()
    // },
    methods:{
        getLunbolist(){
            this.lunbolist.push({id:0,img:'http://iph.href.lu/879x200?text=%E5%8D%A0%E4%BD%8D%E5%9B%BE&bg=ccc'},
                {id:1,img:'http://iph.href.lu/879x200?text=%E5%8D%A0%E4%BD%8D%E5%9B%BE&bg=ccc'},
                {id:2,img:'http://iph.href.lu/879x200?text=%E5%8D%A0%E4%BD%8D%E5%9B%BE&bg=ccc'})
        },
        gocomment(id){
            //进入评论界面
            this.$router.push({name:'shopcomment',params:{id}})
        },
        goinstraction(id){
            this.$router.push({name:'shopdescrip',params:{id}})
        },
        // showball(){
            
        // },
        beforeEnter(el){
            el.style.transform = "translate(0,0)"; 
            // document.getElementById('mybtn').setAttribute('disabled','true')        
        },
        enter(el,done){
            el.offsetWidth;
            //根据动画起始位置调整位移
            const BALLMOVE = this.$refs.myball.getBoundingClientRect()
            const BADGEMOVE = document.getElementById('badge').getBoundingClientRect()
            const XDIST = BADGEMOVE.left - BALLMOVE.left
            const YDIST = BADGEMOVE.top - BALLMOVE.top
            // console.log(BALLMOVE.top)
            el.style.transform = `translate(${XDIST}px,${YDIST}px)`;
            el.style.transition = "all 0.6s ease";
            done()
        },
        afterEnter(el){
            this.ballflag = !this.ballflag
            // document.getElementById('mybtn').removeAttribute('disabled')
            // this.flag = false
        },
        // enterCancelled(){
        //     this.flag = true
        // },
        getSelectcount(count){
            this.count = count
            // console.log(count)
        },
        addshop(){
            if(this.count > this.shopinfo.shop_ku ){
                Toast('库存不足')
            }else{
                this.ballflag = !this.ballflag
                // this.flag = !this.flag
                // console.log(typeof this.id) 
                this.id = parseInt(this.id)         
                var com = {id:this.id,count:this.count,price:this.shopinfo.sell_price,selected:true}
                this.shoplist = com
                this.$store.commit('addcart',com)
            }
        }
    },
    // watch:{
    //     'ballflag':function(newVal,oldVal){
    //         if(newVal){
    //             document.getElementById('mybtn').setAttribute('disabled','true')
    //         }else{
    //             document.getElementById('mybtn').removeAttribute('disabled')
    //         }
    //     }
    // },
    components:{
        numbox
    }
}
</script>

<style lang="less" scoped>
.shopinfo{
    background-color: #eeeeee;
    overflow: hidden;
    .mint-swipe{
        height: 200px;
        .mint-swipe-item{
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .mui-card{
        &:first-of-type .mui-card-content-inner{
        padding: 0;
        }
        .mui-card-content-inner{
            .marketprice{
                text-decoration: line-through;
            }
            .sellprice{
                color: red;
                font-size: 16px;
                font-weight: bold;
            }
            .btn{
                margin-top: 10px;
            }
        }
        .mui-card-footer{
            display: block;
            // justify-content: space-around;
            button{
                margin:10px 0;
            }
        }
    }
}
.ball{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 999;
    top: 360px;
    left: 140px;
}

</style>